<template>
    <rui-page :defines="defines">
        <div style="background-color: #f9fafc;">
            <Alert show-icon style="height: 30px;">
                <div style="margin-top:-2px" >请输入查询条件</div>
            </Alert>
            <rui-query
                ref="searchForm"
                :query="queryData"
                :query-rows="searchFormOptions"
            />
        </div>
        <div style="background-color: #f9fafc;">
            <rui-table
                :defineId="'messageTemplate'"
                :fixedLeft="['opt']"
                :showIndex="false"
                :select="false"
                :columns="messageColumns"
                :slots="[{key:'opt',slot:'opt'}]"
                @loadDatas="queryData"
                ref-query="searchForm"
                ref="templateTable"
            >
                <template slot="toolBar">
                    <Button @click="add" type="primary" icon="md-add">新增</Button>
                </template>
                <template slot="opt" slot-scope="{ row }">
                    <div>
                        <Button @click="edit(row)" size="small" type="primary" icon="ios-create">编辑</Button>
                        <Button type="error" size="small" @click="remove(row)" icon="md-trash">删除</Button>
                    </div>
                </template>
            </rui-table>
        </div>
        <Modal
            v-model="messageModalVisible"
            :title="modalTitle"
            :closable="false"
            :width="800"
            :mask-closable="false"
            @on-ok="messageSubmit"
        >
            <rui-form :form-options="templateFormOptions" :read-only="false"
                      ref="messageForm" style="margin-left:-12px;margin-top:-30px;height: 350px;">

                <template slot="templateType" slot-scope="{ key,data }">
                    <Select v-model="data[key]" @on-change="validiRequired" clearable>
                        <Option v-for="item in dataDic.templateType" :value="item.value"
                                :key="item.value" :label="item.title">
                            {{ item.title }}
                        </Option>
                    </Select>
                </template>


            </rui-form>
            <div slot="footer">
                <Button size="small" type="primary"  @click="messageModalVisible = false" icon="ios-backspace">取消</Button>
                <Button type="primary" size="small" @click="messageSubmit" icon="md-bookmark">保存</Button>
            </div>
        </Modal>
    </rui-page>
</template>
<script>
    import messageTemplateDefine from "_p/basic/api/contract/message-template-config/message-template-define";
    import {getByTypes} from "_p/basic/api/admin/datadic";
    import {
        getTemplateList,
        addTemplate,
        editTemplate,
        deleteTemplate
    } from "@/projects/basic/api/contract/message-template-config/messageTemplate";
    import {deepClone} from "@/libs/utils/ObjectClone";
    export default {
        name: "message-template",
        data() {
            return {
                dataDic:{},
                messageModalVisible: false,
                modalTitle: "新增短信模板",
                searchFormOptions: [
                    {
                        defineId: "messageTemplate", span: 6, fields: ["templateType","status"]
                    }
                ],
                templateFormOptions: [
                    {
                        grids: [

                            {
                                defineId: "messageTemplate",
                                span: 10,
                                fields: ['templateId','templateType','status'],
                                slots: [{key: 'templateType', slotName: 'templateType'}]
                            },
                            {
                                defineId: "messageTemplate",
                                span: 10,
                                fields: [ 'priority', 'channel','templateBusiness']
                            },
                            {
                                defineId: "messageTemplate",
                                span: 20,
                                fields: [ 'templateContent',"subject"]
                            }
                        ]
                    }

                ],
                messageColumns: [
                    'opt', 'templateId','templateType','templateBusiness','templateContent','channel','priority','status','createTime'
                ],

            };
        },
        computed: {
            defines() {
                return [
                    {
                        id: "messageTemplate",
                        fields: messageTemplateDefine
                    }
                ];
            }
        },
        methods: {
            queryData(queryData) {
                getTemplateList(queryData).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        this.$refs.templateTable.updateTableData(records, total);
                    }
                });
            },
            refresh() {
                this.$refs['templateTable'].reloadData();
            },

            messageSubmit() {
                this.validiRequired(this.$refs.messageForm.getFormData().templateType);
                this.$refs.messageForm.getForm().validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            addTemplate(this.$refs.messageForm.getFormData())
                                .then(res => {
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.refresh();
                                        this.messageModalVisible = false;
                                    }
                                })
                                .catch(() => {
                                    this.refresh();
                                });
                        } else {
                            // 编辑
                            editTemplate(this.$refs.messageForm.getFormData())
                                .then(res => {
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.messageModalVisible = false;
                                        this.refresh();
                                    }
                                })
                                .catch(() => {
                                    this.refresh();
                                });
                        }
                    }
                });
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除参数: " + v.templateId + " ?",
                    onOk: () => {
                        deleteTemplate(v.id).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.refresh();
                            }
                        });
                    }
                });
            },
            add() {
                this.$refs.messageForm.resetFrom();
                this.modalType = 0;
                this.modalTitle = "新增";
                this.messageModalVisible = true;
                this.$refs.messageForm.setAllFieldRequired(true);
            },
            edit(row) {
                this.modalType = 1;
                this.modalTitle = "编辑";
                this.$refs.messageForm.updateFormData(row);
                this.$refs.messageForm.setAllFieldRequired(true);
                this.messageModalVisible = true;
            },
            validiRequired(value){
                console.log(value);
                if(value==="email"){
                    this.$refs.messageForm.setFieldRequired("subject",true);
                }else{
                    this.$refs.messageForm.setFieldRequired("subject",false);
                }
            }
        },

        mounted() {
            this.refresh();
            getByTypes(["templateType"]).then(res => {
                if (res.code === "0000") {
                    this.dataDic = deepClone(res.data);
                }
            });
        }
    };
</script>
